//目标：实现点击跳转页面，替换页面的功能  使用原生history的API去实现:跳转页面 监听history变化
// const [url, push, replace] = useHistory()
// push('/aaa')  replace('/bbb')
import { useSyncExternalStore } from 'react';

export const useHistory = () => {
  const subscribe = (callback: () => void) => {
    // 订阅者 监听history的变化
    //vue 里面的路由有三种模式 一种是ssr用的， 两种web：hash模式history模式
    // history底层 popstate事件
    // hash底层 hashchange事件
    window.addEventListener('popstate', callback);
    window.addEventListener('hashchange', callback);
    return () => {
      // 取消订阅
      window.removeEventListener('popstate', callback);
      window.removeEventListener('hashchange', callback);
    };
  };

  const getSnapshot = () => {
    return window.location.href;
  };

  const url = useSyncExternalStore(subscribe, getSnapshot);
  const push = (url: string) => {
    window.history.pushState(null, '', url);
    // 坑1：视图不更新，需要手动触发
    window.dispatchEvent(new PopStateEvent('popstate'));
    window.dispatchEvent(new HashChangeEvent('hashchange'));
  };

  const replace = (url: string) => {
    window.history.replaceState(null, '', url);
    // 坑1：视图不更新，需要手动触发
    window.dispatchEvent(new PopStateEvent('popstate'));
    window.dispatchEvent(new HashChangeEvent('hashchange'));
  };

  return [url, push, replace] as const;
};

// 坑1：点击跳转浏览器url变化了，但是视图没有更新
// 原因：popstate 只能监听浏览器的前进后退按钮操作，无法监听 pushState replaceState API
// 解决：手动触发 popstate监听事件

// 注意事项：见有道云笔记 “坑” 章节
